Electron 是一個基於 JavaScript、HTML 和 CSS 的框架，它使得開發者可以使用熟悉的 Web 技術來構建跨平台的桌面應用程式。Electron 將 Chromium（瀏覽器引擎）與 Node.js 相結合，使應用能夠同時運行在 Windows、macOS 和 Linux 上。在這篇文章中，我們將深入探討 Electron 的架構與原理，了解它是如何工作的。

Electron 的核心架構

Electron 的架構由兩個主要部分組成：主程序 和 渲染程序。

1. 主進程（Main Process）

主程序 是 Electron 程式的入口點，當程式啟動時，這個程序會首先被創建並持續運行，直到程式結束。主程序負責管理程式的生命周期，創建和控制視窗，處理系統級別的功能（例如檔案系統操作、程式菜單、通知等）。

• 主程序擁有完整的 Node.js API，可以使用文件系統、網路請求等。
• 主程序與系統資源直接互動，比如創建和管理桌面程式的視窗。

主程序的基本範例：

在 Electron 程式中，主程序通常是由一個 main.js 文件來管理的，下面是一個基本的主程序程式範例：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });

  mainWindow.loadURL('http://localhost:3000'); // 指向渲染程序的內容（React 程式）
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

2. 渲染程序（Renderer Process）

渲染程序 是負責顯示 UI 的部分，通常每個程式視窗對應一個渲染程序。渲染程序使用的是 Chromium，這意味著它運行的就是標準的 Web 程式技術：HTML、CSS 和 JavaScript。

• 渲染程序本身是獨立的，它們與主程序通過 IPC（程序間通信） 進行通信。
• 渲染程序專注於顯示程式的 UI 和處理前端的業務邏輯。

渲染程序的特性：

• 每個 Electron 程式視窗（BrowserWindow）都運行在自己的渲染程序中。
• 渲染程序主要負責顯示程式的 UI 並處理與 client 的互動。
• 渲染程序可以使用 Web 技術建立 UI（例如 React、Vue.js、Angular 等各大框架）。

3. 預載入腳本（Preload Script）

Electron 還有一個名為 preload.js 的特殊腳本，它允許我們將某些 Node.js API 暴露給渲染程序。這樣做的目的是保持程式的安全性，因為直接在渲染程序中啟用 Node.js 可能會帶來安全風險。

Preload.js 通常是用來設置安全的 API，並在主程序與渲染程序之間進行安全的通信。

import { contextBridge } from 'electron';
import { electronAPI } from '@electron-toolkit/preload'

// 使用 contextBridge 將 API 給渲染程序
contextBridge.exposeInMainWorld('electron', electronAPI)
contextBridge.exposeInMainWorld('ipcSend', electronAPI.ipcRenderer.send)
contextBridge.exposeInMainWorld('ipcOn', electronAPI.ipcRenderer.on)
contextBridge.exposeInMainWorld('ipcInvoke', electronAPI.ipcRenderer.invoke)

主程序與渲染程序之間的通信

在 Electron 中，主程序和渲染程序是相互獨立的，因此它們之間不能直接訪問對方的變數或函式。為了讓它們通信，Electron 提供了 IPC（Inter-Process Communication，程序間通信） 機制。

IPC 機制

IPC 允許渲染程序和主程序通過消息進行通信。Electron 提供了兩個 IPC 模組：

ipcMain：用於主程序，負責接收來自渲染程序的訊息。
ipcRenderer：用於渲染程序，負責向主程序發送訊息。

IPC 的使用範例：

const { ipcMain } = require('electron');

// 在主程序中處理來自渲染程序的訊息
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg);
  event.reply('asynchronous-reply', '收到訊息');
});

在渲染程序中，我們可以使用 ipcRenderer 來向主程序發送訊息並接收回應：

const { ipcRenderer } = require('electron');

// 向主程序發送訊息
ipcRenderer.send('asynchronous-message', '你好，主程序');

// 接收來自主程序的回覆
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg);
});

如此一來，渲染程序就可以與主程序進行通信，例如請求數據、處理文件等系統操作。

結論

Electron 的核心架構分為主程序和渲染程序，主程序負責系統層級的操作，而渲染程序負責顯示 UI。

通過 IPC，這兩者之間可以進行安全的通信。理解這一架構是開發 Electron 程式的基礎，基本上程式的大部分場景都是透過 IPC 來進行視窗與 UI 的互動

隨著對 Electron 的深入了解，讀者將能夠構建功能豐富且跨平台的桌面程式，並且使用 Web 技術的優勢來提供現代化的 UI 體驗。接下來，我們將繼續探索如何利用 Electron 實現更多功能，例如文件系統互動、截圖、與外部 API 整合等。